<template>
	<view>
		<view class="timeline">
			
			<view   class="uni-timeline" style="padding: 30upx 20upx;background-color: #fff;margin: 20upx 0 0;">
				<view class="detail webkit">
					<view class="thumb">
						<image :src="res.goodspic" mode=""></image>
						<text v-if="res.goodsCount">{{ res.goodsCount }}件商品</text>
					</view>
					<view class="flex">
						<view style="font-size: 28upx;color: #333;">物流状态 <text style="color: #04ab02;margin-left: 6upx;" v-if="res.expressStatus">{{res.expressStatus}}</text></view>
						<view v-if="res.expresscom">快递公司 {{res.expresscom}}</view>
						<view style="position: relative;" v-if="res.expresssn">快递单号 {{res.expresssn}} 
							<view style="position: absolute;top: -10upx;right: 30upx;border: 1upx solid #CCCCCC;padding: 6upx 15upx;border-radius: 10upx;" @click="setClipboardData">
								复制
							</view>
						</view>
					</view>
				</view>
				<view class="" v-if="length == 0">
					<image src="../../../static/order2.png" mode="" style="width: 240upx;height: 240upx;display: block;margin: 200upx auto 20upx;"></image>
					<text style="display: block;text-align: center;color: #aaa;">物流更新不及时可复制快递单号到第三方查询</text>
				</view>
				<view v-if="length == 1" v-for="(item,index) in res.addressList" :key="index" class="uni-timeline-item" :class="{'uni-timeline-first-item':index ==0}" style="padding: 0 20upx 30upx 10upx;">
					<view class="uni-timeline-item-divider"></view>
					<view class="uni-timeline-item-content" style="padding-top:4upx">
						<view style="font-size: 26upx;" class="step" v-if="item.AcceptStation">{{item.AcceptStation}}</view>
						<view class="datetime" style="font-size: 24upx;" v-if="item.AcceptTime">{{item.AcceptTime}}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				res:[],
				data:[],
				length: '',
				openid:'',
				addressList:''
			};
		},
		onLoad:function(e){
			this.id = e.id
			uni.showLoading()
			uni.getStorage({
				key: 'openid',
				success: (res) => {
					this.openid = res.data
					this.setAjax()
				},
				fail: () => {
					uni.navigateTo({
						url: '../../login/login'
					});
				}
			});
		},methods:{
			setAjax(){
				uni.request({
					url: 'http://m.wpweipin.com/app/index.php?i=4&c=entry&m=ewei_shopv2&do=mobile&r=order.express&app=1&orderid='+ this.id,
					method: 'POST',
					data: {'openid':this.openid},
					header:{'Content-Type':'application/x-www-form-urlencoded'},
					success: res => {
						console.log(res.data)
						// console.log(JSON.parse(res.data.addressList))
						uni.hideLoading()
						this.res = res.data
						
						// this.addressList = JSON.parse(res.data.addressList)
						
						if(res.data.addressList.length >0){
							this.length = 1
						}
						// 暂时没有物流信息
						else if(res.data.addressList.length == 0){
							this.length = 0
						}
					},
					fail: () => {},
					complete: () => {}
				});
			},
			setClipboardData(){
				uni.setClipboardData({
				    data: this.res.expresssn,
				    success: function () {
				        console.log(this.res.expresssn);
				    }
				});
			}
		}
	}
</script>

<style>
	page{
		background-color: #FFFFFF;
	}
	.uni-timeline-first-item .uni-timeline-item-divider{background-color:#ef4f4f;}.uni-timeline-first-item .uni-timeline-item-content view{color:#ef4f4f;}.detail{padding:0 20upx;margin-bottom:20upx;padding-bottom:20upx;border-bottom:20upx solid #eaeaea;}.detail .flex{}.detail .flex view{font-size:24upx;color:#959595;}.detail .thumb{position:relative;margin-right:20upx;}.detail .thumb image{width:128upx;height:128upx;}.detail .thumb text{position:absolute;top:88upx;background:#000c;color:#fff;left:0;right:0;font-size:24upx;text-align:center;height:40upx;line-height:40upx;}</style>